<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<style type="text/css">
        *
        {
        	margin:0;padding:0;
        }
        ul
        {
        	width:310px;margin:50px auto;
        }
        li
        {
        	list-style: none;
        }
        li p
        {
        	float: left;border:1px solid black;width:100px;text-align: center;
        }
        .li1 p
        {
        	background: pink;
        }
	</style>

</head>
<body>
	
	<ul>
		<li class="li1">
			<p><input type="checkbox" class="allBtn"></p>
			<p>菜名</p>
			<p>厨师</p>
		</li>
		<li>
			<p><input type="checkbox" class="btn"></p>
			<p>菜名</p>
			<p>厨师</p>
		</li>
		<li>
			<p><input type="checkbox"  class="btn"></p>
			<p>菜名</p>
			<p>厨师</p>
		</li>
		<li>
			<p><input type="checkbox"  class="btn"></p>
			<p>菜名</p>
			<p>厨师</p>
		</li>
		<li>
			<p><input type="checkbox"  class="btn"></p>
			<p>菜名</p>
			<p>厨师</p>
		</li>
		<li>
			<p><input type="checkbox"  class="btn"></p>
			<p>菜名</p>
			<p>厨师</p>
		</li>
	</ul>

</body>
</html>
<script type="text/javascript">
	$(function(){
		//点击allBtn，下面的所有input选中,再点，不选中
		$('.allBtn').click(function(){
			//获取input的属性值
			var isCheck = $('input').prop('checked');
			//设置属性值
			$('input').prop('checked',isCheck);
			
		});

        //设置全选
		$('.btn').click(function(){
            	
			var allLength = $('.btn').length;   //所有的inpu
			var checkedLength = $(".btn:checked").length;   //选中的input


            //判断，假如两者相等
			if(checkedLength == allLength)
			{
				//说明可以设置全选
                $('.allBtn').prop('checked',true);   //全选按钮设置为选中
			}
			else
			{
				$('.allBtn').prop('checked',false);   //全选按钮设置为不选中
			}
        });
	});
</script>